<template>
	<view>
		<image class="bg-set" src="../../static/global-bg.jpg" mode="widthFix"></image>
		<!-- 空盒子用来防止消息过少时 拉起键盘会遮盖消息 -->
		<view  :animation="anData"  style="height:0;">
			
		</view>
		<!-- 消息体 -->
		<scroll-view scroll-with-animation scroll-y="true"  @touchmove="hideKey"
		style="width: 750rpx;" :style="{'height':srcollHeight}" :scroll-top="go" >
			<!-- 用来获取消息体高度 -->
			<view id="okk" scroll-with-animation >
			<!-- 消息 -->
			<view  class="flex-column-start" v-for="(x,i) in msgList" :key="i">

				<!-- 用户消息 头像可选加入-->
				<view v-if="x.my" class="flex justify-end padding-right one-show  align-start  padding-top" >
					<view class="flex justify-end"  style="width: 400rpx;">
						<view class="margin-left padding-chat bg-cyan" style="border-radius: 35rpx;">
							<text   style="word-break: break-all;">{{x.msg}}</text>
						</view>
						<!-- <image v-if="x.my" class="chat-img" src="../../static/photo.jpg" mode="aspectFill" ></image>	 -->
					</view>
				<!-- <image class="chat-img margin-left" src="../../static/..." mode="aspectFill" ></image> -->
				</view>
				<!-- 机器人消息 -->
				<view v-if="!x.my" class="flex-row-start margin-left margin-top one-show" >
					<view class="chat-img flex-row-center">
						<image style="height: 75rpx;width: 75rpx;" src="../../static/logo.png" mode="aspectFit"></image>
					</view>
					<view  class="flex"  style="width: 500rpx;">
						<view class="margin-left padding-chat flex-column-start" style="border-radius: 35rpx;background-color: #f9f9f9;">
							<text  style="word-break: break-all;" >{{x.msg}}</text>
							<!-- 消息模板 =>多个答案 -->
							<view class="flex-column-start" v-if="x.type==2" style="color: #2fa39b;">
								<text style="color: #838383;font-size: 22rpx;margin-top: 15rpx;">猜你想问:</text>
								<!-- 连接服务器应该用item.id -->
								<text @click="answer(index)" style="margin-top: 30rpx;" 
								v-for="(item,index) in x.questionList" :key="index" >{{item}}</text>
							</view>
						</view>
					</view>
				</view>
		</view>
		<!-- loading是显示 -->
		<view v-show="msgLoad" class="flex-row-start margin-left margin-top">
			<view class="chat-img flex-row-center">
				<image style="height: 75rpx;width: 75rpx;" src="../../static/logo.png" mode="aspectFit"></image>
			</view>
			<view  class="flex"  style="width: 500rpx;">
				<view class="margin-left padding-chat flex-column-start" 
				style="border-radius: 35rpx;background-color: #f9f9f9;">
					<view class="cuIcon-loading turn-load" style="font-size: 35rpx;color: #3e9982;">
					</view>
				</view>
			</view>	
		</view>
		<!-- 防止消息底部被遮 -->
		<view style="height: 120rpx;">
		</view>
		</view>	
		</scroll-view>		

		<!-- 底部导航栏 -->
		<view class="flex-column-center" style="position: fixed;bottom: -180px;"
		:animation="animationData" >		
			<view class="bottom-dh-char flex-row-around" style="font-size: 55rpx;">
				<!-- vue无法使用软键盘"发送" -->
		<!-- 		 <input  v-model="msg"  class="dh-input" type="text" style="background-color: #f0f0f0;" 
				 @confirm="sendMsg" confirm-type="search" placeholder-class="my-neirong-sm"
				 placeholder="可以和小物开始聊天啦" /> -->
				 <view v-if="answerNum==0" @click="sendMsg('让我们赶紧开始吧！')" class="cu-tag bg-cyan round">
				 	  让我们赶紧开始吧！
				 </view>
					<view v-if="answerNum==0" @click="sendMsg('听起来很有趣！')" class="cu-tag bg-cyan round">
						听起来很有趣！
					</view>
					<view v-if="answerNum==1" @click="sendMsg('是的，我很期待！',true)" class="cu-tag bg-cyan round">
						是的，我很期待！
					</view>
					<view v-if="answerNum==1" @click="sendMsg('不是，真没劲！', false)" class="cu-tag bg-cyan round">
						不是，真没劲！
					</view>
					<view v-if="answerNum==2" @click="start" class="cu-tag bg-cyan round">
						开启你的好心情之旅
					</view>
					<view v-if="answerNum==3" class="cu-tag bg-cyan round">
						记得小物永远在这里等你呀，期待再次见到你😀
					</view>
			</view>		
				<!-- 附加栏(自定义) -->
			<view class="box-normal flex-row-around flex-wrap">
				<view class="tb-text">
					<view class="cuIcon-form"></view>
					<text >问题反馈</text>
				</view>
				<view class="tb-text">
					<view class="cuIcon-form"></view>
					<text>人工客服</text>
				</view>
			</view>
		</view>
		<!-- 弹出图片窗口 -->
		<picture-modal content="好的" @hideModal="hideModal" :modalName="modalName"></picture-modal>
	</view>
</template>

<script>
	import PictureModal from '@/components/PictureModal.vue'
	import {setTodoDefault} from '@/api/todo.js'
	import {mapState} from 'vuex'
	// rpx和px的比率
	var l
	// 可用窗口高度
	var wh
	// 顶部空盒子的高度
	var mgUpHeight
	export default {	
		components:{
			PictureModal
		},
		onLoad(){
			// 如果需要缓存消息缓存msgList即可
			// 监听键盘拉起
			// 因为无法控制键盘拉起的速度,所以这里尽量以慢速处理
			uni.onKeyboardHeightChange(res => {
				const query = uni.createSelectorQuery()
				query.select('#okk').boundingClientRect(data => {
					// 若消息体没有超过2倍的键盘则向下移动差值,防止遮住消息体
					var up=res.height*2-data.height-l*110
					console.log(up)
				  if(up>0){
					  // 动态改变空盒子高度
					 this.msgMove(up,300)
					 // 记录改变的值,若不收回键盘且发送了消息用来防止消息过多被遮盖
					 mgUpHeight=up
				  }
				  // 收回
				  if(res.height==0){
					   this.msgMove(0,0)	
				  }
				}).exec();
			 })
			var query=uni.getSystemInfoSync()
						
			l=query.screenWidth/750		
			wh=query.windowHeight								
			this.srcollHeight=query.windowHeight+"px"
		},
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				signatureImg:"",
				modalName:null,
				isShow:false,
				msgLoad:false,
				anData:{},
				animationData:{},
				showTow:false,
				// 消息体,定义机器人初次的消息(或者自定义出现时机)
				// my->谁发的消息 msg->消息文本 type->客服消息模板类型 questionList->快速获取问题答案的问题列表
				msgList:[
					{my:false,msg:"你好，我是小物，很高兴能够在心之物语见到你。"},
					{my:false,msg:"先介绍一下这里吧，我希望可以和你在心之物语玩一场名为“好心情之旅”的游戏，希望你可以在这场旅途中更好的识别情绪，了解自己，逐步建立稳定的好心情。"},
				],
				msg:"",
				go:0,
				srcollHeight:0,
				answerNum: 0,
				modalName: ''
			}
		},
		methods: {
			// 切换输入法时移动输入框(按照官方的上推页面的原理应该会自动适应不同的键盘高度-->官方bug)
			goPag(kh){	
				this.upTowmn(0,250)
				if(this.keyHeight!=0){					
					if(kh-this.keyHeight>0){
						this.upTowmn(this.keyHeight-kh,250)
					}
					
				}
			},
			// 移动顶部的空盒子
			msgMove(x,t){
				var animation = uni.createAnimation({
					 duration: t,
							timingFunction: 'linear',
					})
					this.animation = animation	  
					animation.height(x).step()
					this.anData = animation.export()
			},
			// 保持消息体可见
			msgGo(){
				const query = uni.createSelectorQuery()
				// 延时100ms保证是最新的高度
				setTimeout(()=>{
					// 获取消息体高度
					query.select('#okk').boundingClientRect(data => {
					   // 如果超过scorll高度就滚动scorll
					   if(data.height-wh>0){
						   this.go=data.height-wh
					   }
					   // 保证键盘第一次拉起时消息体能保持可见
					   var moveY=wh-data.height
					   // 超出页面则缩回空盒子
					   if(moveY-mgUpHeight<0){
						   // 小于0则视为0
						   if(moveY<0){
							   this.msgMove(0,200)
						   }else{
							   // 否则缩回盒子对应的高度
							  this.msgMove(moveY,200) 
						   }					   
					   }
					}).exec();
				},100)
			},
			// 回答问题的业务逻辑
			answer(id){
				// 这里应该传入问题的id,模拟就用index代替了
				console.log(id)
			},
			sendMsg(val, flag){
				if(val) {
					this.msg = val
				}
				// 消息为空不做任何操作
				if(this.msg==""){
					return 0;
				}
				// 显示消息 msg消息文本,my鉴别是谁发的消息(不能用俩个消息数组循环,否则消息不会穿插)
				this.msgList.push({"msg":this.msg,"my":true})				
				// 保证消息可见
				this.msgGo()
				// 回答问题
				this.msgKf(this.msg, flag)
				// 清除消息
				this.msg=""
			},
			msgKf(x, flag){				
				// loading
				this.msgLoad=true
				// 这里连接服务器获取答案
				// 下面模拟请求
				setTimeout(()=>{
					// 取消loading
					this.msgLoad=false
					if (this.answerNum === 0) {
						this.msgList.push({my:false,msg:"无论你手头有什么事情，无论你面对者多少烦恼，此时此刻，如果想要唤醒你的好心情，请立即坐下，忽略掉一切琐事，让我们放下一切杂念，启动你的“好心情之旅”。"})
						this.msgList.push({my:false,msg:"你是由衷地期待获得好心情吗？"})
						this.answerNum = 1
					} else if (this.answerNum === 1) {
						console.log(flag)
						if (!flag) {
							this.msgList.push({my:false,msg:"内外一致是我们真正把一件事情做好的前提，如果我们选择做的事情违背了我们的意愿，那么我们就会非常用以放弃。好玩的游戏也都是我们自愿去玩的。"})
							this.msgList.push({my:false,msg:"所以，如果你并不是自愿加入这趟“好心情之旅”的，现在就可以和小物告别了。当然，如果你什么时候改变主意了，随时欢迎你回来，小物会一直在心之物语等你。"})
							this.answerNum = 3
						} else {
							this.msgList.push({my:false,msg:"好的，我们达成了一致，下面让我们一起启程吧！"})
							this.answerNum = 2
						}
					}
					this.msgGo()
				},500)
			},
			// 不建议输入框聚焦时操作此动画
			ckAdd(){
				if(!this.showTow){
					this.upTowmn(-180,350)
				}else{
					this.upTowmn(0,200)
				}
				this.showTow=!this.showTow
			},
			hideKey(){
				uni.hideKeyboard()
			},
			// 拉起/收回附加栏
			upTowmn(x,t){
				var animation = uni.createAnimation({
				      duration: t,
				        timingFunction: 'ease',
				    })
				this.animation = animation
				animation.translateY(x).step()
				this.animationData = animation.export()
			},
			start() {
				this.modalName = 'Image'
			},
			hideModal() {
				setTodoDefault(this.userInfo.userid).then(res => {
					console.log(res)
				})
				this.modalName = ''
				uni.switchTab({
					url: '../home/index'
				})
				
			}
		}
	}
</script>

<style style="scss">
.bottom-dh-char{
	 	background-color: #f9f9f9;
	 	width: 750rpx;
	 	height: 110rpx;
	 }
.center-box{
	width: 720rpx;
	padding-left: 25rpx;
}
.hui-box{
	width: 750rpx;
	height: 100%;
	
}
.dh-input{
	width: 600rpx;
	height: 65rpx;
	border-radius: 30rpx;
	padding-left: 15rpx;
	background-color: #FFFFFF;
}
.box-normal{
	width: 750rpx;
	height: 180px;
	background-color: #FFFFFF;
}
.tb-text view{
	font-size: 65rpx;
}
.tb-text text{
	font-size: 25rpx;
	color: #737373;
}
.chat-img{
	border-radius: 50%;
	width: 100rpx;
	height: 100rpx;
	background-color: #f7f7f7;
}

.padding-chat{
	padding: 17rpx 20rpx;
}
.tb-nv{
	width: 50rpx;
	height: 50rpx;
}
</style>

